<template>
  <div>
    <router-view />
    <van-tabbar v-model="active" ref="vanTab">
      <van-tabbar-item safe-area-inset-bottom :to="item.name" @click="tabIndex(index)" v-for="(item, index) in tabbars"
        :key="'tabbar' + index">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.normal : item.active" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import { TabbarItem } from 'vant'
export default {
  name: 'FootNav',
  components: {
    // TabbarItem
  },
mounted () {
    // 如有缓存，刷新页面时还进入该页面
    const index = sessionStorage.getItem('tabIndex')
    const accessToken = localStorage.getItem('access_token')
    if (!accessToken) {
      this.$router.push('/login')
    }
    if (index) {
      this.tabIndex(index)
    }
    console.log(777, localStorage.getItem('currentType'))
    if (localStorage.getItem('currentType') === 'logistics_in') {
      this.tabbars = [
        {
          name: '/library',
          title: '统计',
          normal: require('@/assets/images/libraryAct_icon.png'),
          active: require('@/assets/images/library_icon.png')
        },
        {
          name: '/stockIn',
          title: '入库',
          normal: require('@/assets/images/stockInAct_icon.png'),
          active: require('@/assets/images/stockIn_icon.png')
        },
        {
          name: '/shockInRecord',
          title: '记录',
          normal: require('@/assets/images/recordActive.png'),
          active: require('@/assets/images/record.png')
        },
        {
          name: '/mine',
          title: '我的',
          normal: require('@/assets/images/mineActive.png'),
          active: require('@/assets/images/mine.png')
        }
      ]
    } else if (localStorage.getItem('currentType') === 'stall') {
      this.tabbars = [
        {
          name: '/index',
          title: '填报',
          normal: require('@/assets/images/taskActive.png'),
          active: require('@/assets/images/task.png')
        },
        {
          name: '/fullInRecord',
          title: '填报记录',
          normal: require('@/assets/images/recordActive.png'),
          active: require('@/assets/images/record.png')
        },
        {
          name: '/preserveDishes',
          title: '菜品留存',
          normal: require('@/assets/images/preserveDishesActive.png'),
          active: require('@/assets/images/preserveDishesIcon.png')
        },
        {
          name: '/mine',
          title: '我的',
          normal: require('@/assets/images/mineActive.png'),
          active: require('@/assets/images/mine.png')
        }
      ]
    } else if (localStorage.getItem('currentType') === 'logistics_out') {
      this.tabbars = [
        {
          name: '/stockOutLibrary',
          title: '统计',
          normal: require('@/assets/images/libraryAct_icon.png'),
          active: require('@/assets/images/library_icon.png')
        },
        {
          name: '/stockOutRecord',
          title: '记录',
          normal: require('@/assets/images/recordActive.png'),
          active: require('@/assets/images/record.png')
        },
        {
          name: '/mine',
          title: '我的',
          normal: require('@/assets/images/mineActive.png'),
          active: require('@/assets/images/mine.png')
        }
      ]
    } else if (localStorage.getItem('currentType') === 'supplier') {
      this.tabbars = [
        {
          name: '/supplierLibrary',
          title: '统计',
          normal: require('@/assets/images/libraryAct_icon.png'),
          active: require('@/assets/images/library_icon.png')
        },
        {
          name: '/supplierRecords',
          title: '记录',
          normal: require('@/assets/images/recordActive.png'),
          active: require('@/assets/images/record.png')
        },
        {
          name: '/rawMaterial',
          title: '原材料',
          normal: require('@/assets/images/rawMaterialActive.png'),
          active: require('@/assets/images/rawMaterial.png')
        },
        {
          name: '/mine',
          title: '我的',
          normal: require('@/assets/images/mineActive.png'),
          active: require('@/assets/images/mine.png')
        }
      ]
    }

    this.$nextTick(() => {
      if (this.$refs.vanTab && this.$refs.vanTab.$el) {
        this.footerMenu = this.$refs.vanTab.$el.offsetHeight
        console.log('底部菜单栏高度1111：', this.footerMenu)
      } else {
        console.error('Foot 组件未找到或未渲染完成')
      }
    })
    // 监听路由变化，同步 van-tabbar 状态
    this.$router.afterEach((to) => {
      const index = this.tabbars.findIndex(item => item.name === to.path)
      if (index !== -1) {
        this.active = index
        sessionStorage.setItem('tabIndex', index)
      }
    })
  },
  // active: {
  //   type: String,
  //   required: true
  // },
  data () {
    return {
      active: 0,
      tabbars: [
        // {
        //   name: '/index',
        //   title: '填报',
        //   normal: require('@/assets/images/taskActive.png'),
        //   active: require('@/assets/images/task.png')
        // },
        // {
        //   name: '/fullInRecord',
        //   title: '填报记录',
        //   normal: require('@/assets/images/recordActive.png'),
        //   active: require('@/assets/images/record.png')
        // },
        // {
        //   name: '/mine',
        //   title: '我的',
        //   normal: require('@/assets/images/mineActive.png'),
        //   active: require('@/assets/images/mine.png')
        // }
      ],
      footerMenu: ''
    }
  },
  methods: {
    tabIndex (index) {
      index = Number(index)
      this.active = index
      // 记录当前tab页
      sessionStorage.setItem('tabIndex', index)
      // console.log(999, this.tabbars, index)
      // const val = this.tabbars[index].name
      // this.$router.push(val)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-tabbar-item__text {
  font-size: 10px;
}

/deep/.van-tabbar-item--active {
  font-size: 10px;
  font-weight: bold;
}

/deep/.van-tabbar {
  // height: 60px;
  // background: #ff9852;
}

/deep/.van-tabbar-item--active {
  font-size: 10px;
  color: #333333;
}
</style>
